{% extends "layout.html" %}

{% block nav %}
<nav class="navbar">
  <div class="navbar-brand">
    <div class="navbar-item">
      <div class="title is-4">Beedo</div>
    </div>
    <div class="navbar-burger burger"
         data-target="primary-nav-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="navbar-menu"
       id="primary-nav-menu">
    <a class="navbar-item {{'is-active' if current_nav == 'dashboard'}}"
       href="{{url_for('.dashboard')}}">
      {{_('Dashboard')}}
    </a>
    <a class="navbar-item {{'is-active' if current_nav == 'entry'}}"
       href="{{url_for('.entries')}}">
      {{_('Entries')}}
    </a>
    <a class="navbar-item"
       href="{{url_for('.logout')}}">
      {{_('Exit')}}
    </a>
  </div>
</nav>
{% endblock %}

{% block script %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  console.log('fuck');
  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Check if there are any nav burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {

        // Get the target from the "data-target" attribute
        var target = $el.dataset.target;
        var $target = document.getElementById(target);

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');

      });
    });
  }

});
</script>
{% endblock %}